<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <style>
        li{
            list-style: none;
        }
        #rs{
            background-color: #eeeeee;
            width: 283px;
            max-height: 81px;
            border: 6px solid #cccccc;
            border-top: 0px;
            padding: 0px 3px;
            position: relative;
            top: -1px;
            box-shadow: 5px 5px 10px;
            overflow: auto;
            display: none;
        }
    </style>

    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <script>
        $(function(){
            $("#key").keyup(function(){
                var key=$(this).val();

                if(""==key){
                    $("#rs").hide();
                    return;
                }

                $("#rs").empty();


                $.getJSON("${pageContext.request.contextPath}/query",
                          {"key":key},
                          function(dataList){
                              if(dataList.length==0){
                                  $("#rs").hide();
                                  return;
                              }

                              $("#rs").show();

                              $(dataList).each(function(index,data){

                                  var l="<li>"+data.message+"</li>";

                                  var $l=$(l);

                                  $l.mouseover(function(){
                                      $(this).css("backgroundColor","#ffee99");
                                  });

                                  $l.mouseout(function(){
                                      $(this).css("backgroundColor","#eeeeee");
                                  });

                                  $l.click(function(){
                                      $("#key").val(data.message);
                                      $("#rs").empty();
                                      $("#rs").hide();
                                  });

                                  $("#rs").append($l);

                              });

                          });



            });
        });
    </script>

</head>
<body>
    <form action="#">
        <input id="key" type="text" style="width: 301px;" autocomplete="off"/>
        <div id="rs">
        </div>
    </form>
</body>
</html>












